<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令v-for</title>
    <style>
        #app{text-align: center}
    </style>

</head>
<body>
    <div id="app">
        <table border="5px solid" colspa="0" cellspacing="0">
            <tr>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <!--哪个元素出现多次,v-for就添加在哪个元素上-->
            <tr v-for="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr> 
            <tr>
                <td>标题1</td>
                <td>分类1</td>
                <td>时间1</td>
                <td>状态1</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr> 
            <tr>
                <td>标题1</td>
                <td>分类1</td>
                <td>时间1</td>
                <td>状态1</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>

    <!--引入vue模块-->
    <script type="module">
        import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        /*创建vue应用实例*/
        createApp({
            data(){
                return{
                    articleList:[{
                        title:'医疗反腐',
                        category:'时事',
                        time:'2023-09-05',
                        state:'已发布'
                    },
                    {
                        title:'中国男篮一败涂地',
                        category:'篮球',
                        time:'2023-09-05',
                        state:'草稿'
                    },
                    {
                        title:'华山大风',
                        category:'旅游',
                        time:'2023-09-05',
                        state:'已发布'
                    }]
                }
            }
        }).mount('#app')
    </script>
</body>
</html>